假设node环境已经装好
当前目录创建package.json文件：
{
"name": "react-demo",
"version": "1.0.0",
"description": "a test",
"main": "bundle.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "xxx",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1"
},
"dependencies": {
"babel-preset-react": "^6.24.1",
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
}然后当前目录执行：
npm install安装成功后在当前目录执行创建并编辑文件webpack.config.js：
var path = require('path')
module.exports = {
entry: './entry.js',
output: {
path:path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'},
{
test: /\.js?$/,//表示要编译的文件的类型，这里要编译的是js文件
loader: 'babel-loader',//装载的哪些模块
exclude: /node_modules/,//标示不编译node_modules文件夹下面的内容
query: {//具体的编译的类型，
compact: true,//表示不压缩
presets: ['es2015', 'react']//我们需要编译的是es6和react
}
}
]
}
}创建编辑入口文件entry.js:
import React from 'react';
import { render } from 'react-dom';
var myDivElement = <div className="foo" />;
render(myDivElement, document.getElementById('mountNode'));创建编辑index.html:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="mountNode"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>执行命令webpack
成功！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。